<template>
    <div class="qrcode-container">
      <div class="card">
        <h3 class="card-title">H5 访问二维码</h3>
        <div class="qrcode-wrapper">
          <QRCode :value="qrValue" :options="qrOptions"     :image-settings='imageSettings' />
          <div class="qrcode-tip">
            <span>二维码将在</span>
            <span class="countdown">{{ countdown }}</span>
            <span>秒后自动刷新</span>
          </div>
        </div>
        <p class="scan-instruction">请使用手机扫描二维码访问 H5 页面</p>
        
        <div class="actions">
          <button @click.stop="refreshQRCode" class="refresh-btn">
            <el-icon><Refresh /></el-icon>
            <span>刷新二维码</span>
          </button>
          <button @click.stop="downloadQRCode" class="download-btn">
            <el-icon><Download /></el-icon>
            <span>下载二维码</span>
          </button>
        </div>
      </div>
      
      <!-- 状态提示 -->
      <div v-if="loading" class="loading-overlay">
        <el-icon class="is-loading"><Loading /></el-icon>
      </div>
      <div v-if="error" class="error-message">{{ error }}</div>
    </div>
  </template>
  
  <script setup>
  import QRCode from 'qrcode.vue';
  import { ref, onMounted, onUnmounted } from 'vue';
  import { Refresh, Download, Loading } from '@element-plus/icons-vue';
  
  // 配置
  const baseUrl = 'http://172.20.19.163:88/h5';
  const REFRESH_INTERVAL = 60000; // 60秒
  
  // 状态
  const qrValue = ref('');
  const countdown = ref(60);
  const loading = ref(false);
  const error = ref('');
  let refreshTimer = null;
  let countdownTimer = null;
  
  // 生成带时间戳的URL
  const generateQRUrl = () => {
    const timestamp = new Date().getTime();
    return `${baseUrl}?t=${timestamp}`;
  };
  const imageSettings = {
    src: 'https://github.com/scopewu.png',
    width: 30,
    height: 30,
    // x: 10,
    // y: 10,
    excavate: true,
  }
  // 刷新二维码
  const refreshQRCode = async () => {
    loading.value = true;
    error.value = '';
    
    qrValue.value = generateQRUrl();
    countdown.value = 60; // 重置倒计时
    loading.value = false;
  };
  
  // 下载二维码
  const downloadQRCode = async () => {
    const canvas = document.querySelector('.qrcode-wrapper canvas');
    if (!canvas) {
      error.value = '未找到二维码图像';
      return;
    }
    
    const link = document.createElement('a');
    link.download = 'h5-qrcode.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  };
  
  // 设置定时刷新
  const startAutoRefresh = async () => {
    // 清除可能存在的旧定时器
    if (refreshTimer) clearInterval(refreshTimer);
    if (countdownTimer) clearInterval(countdownTimer);

    // 立即执行一次刷新
    await refreshQRCode();

    // 二维码刷新定时器
    refreshTimer = setInterval(async () => {
      await refreshQRCode();
    }, REFRESH_INTERVAL);

    // 倒计时定时器
    countdownTimer = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--;
      }
    }, 1000);
  };
  
  // 二维码配置
  const qrOptions = {
    width: 200,
    height: 200,
    margin: 0,
    color: {
      dark: '#000000',
      light: '#ffffff'
    }
  };
  
  // 组件挂载时初始化
  onMounted(() => {
    startAutoRefresh();
  });
  
  // 组件卸载时清理
  onUnmounted(() => {
    if (refreshTimer) clearInterval(refreshTimer);
    if (countdownTimer) clearInterval(countdownTimer);
  });
  </script>
  
  <style scoped>
  .qrcode-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
  }
  
  .card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
  }
  
  .qrcode-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #f9f9f9;
  }
  
  .qrcode-tip {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .countdown {
    color: #409EFF;
    font-weight: bold;
    font-size: 14px;
  }
  
  .scan-instruction {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
  }
  
  .actions {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  
  .refresh-btn,
  .download-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: #409eff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .refresh-btn:hover,
  .download-btn:hover {
    background-color: #308ee0;
  }
  
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  
  .error-message {
    color: #f56c6c;
    margin-top: 10px;
    text-align: center;
  }
  </style>    